<template>
  <div class="content">
    <div class="content-block">
      <div class="block-row">
        <div class="block-col job-fair">
          <div class="top-tab-block">
            <div :class="jobFairActive===1?'active':''" @click="jobFairActive=1" class="tab-item">现场招聘会</div>
            <div :class="jobFairActive===2?'active':''" @click="jobFairActive=2" class="tab-item">网络招聘会</div>
            <div :class="jobFairActive===3?'active':''" @click="jobFairActive=3" class="tab-item">校园招聘会</div>
          </div>
          <template v-if="jobFair.length>0">
            <div class="body-tab-block" v-loading="jobFairLoading">
              <div class="tab-item" v-for="(item) in jobFair" :key="item.id">
                <div class="jobFair-block">
                  <div class="jobTime-item">
                    <img src="@/assets/images/home/index/reserve.png" class="state-img" v-if="item.state===1" alt="">
                    <img src="@/assets/images/home/index/underway.png" class="state-img" v-if="item.state===2" alt="">
                    <img src="@/assets/images/home/index/finish.png" class="state-img" v-if="item.state===3" alt="">
                    <img :src="item.coverUrl" class="item-img" alt="">
                  </div>
                  <div class="job-item">
                    <div class="title-item">
                      <div class="body-title">{{ item.title }}</div>
                    </div>
                    <div class="time-item">
                      <div class="time-title">企业{{ item.qyCount }}家</div>
                      <div class="time-title">职位{{ item.zwCount }}个</div>
                    </div>
                  </div>
                </div>
                <div class="jobFair-time">
                  <div class="holdTime">{{ item.eventTimeStart }} 至 {{ item.eventTimeEnd }}</div>
                  <router-link :to="{name:'jobFair',query:{id:item.id}}" class="btn2">进入会场</router-link>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PositionItem from "@/components/PositionItem/PositionItem";
import {findAllByCrtTimeApi} from "@/api/jobFair";
export default {
  name: "Index",
  comments:{PositionItem},
  data() {
    return {
      jobFairActive:1,
      jobFair: [],
      jobFairLoading:false,
    }
  },
  methods: {
    getJobFairList(){
      this.jobFairLoading=true
      findAllByCrtTimeApi({sceneType: this.jobFairActive}).then((res)=>{
        this.jobFair=res
      }).finally(()=>{
        this.jobFairLoading=false
      })
    },
  },
  watch:{//监听
    jobFairActive:{
      handler(){
        this.getJobFairList()
      },
      immediate:true,//深度监听
    }
  },
  mounted() {
    this.getJobFairList()
  }
}
</script>

<style lang="scss" scoped>
$whiteTransparent: rgba(255, 255, 255, 0.9);
$borderRadius:6px;
$interval:15px;
.content {
  width: 100%;


  .content-block {
    width: $contentWidth;
    margin: 0 auto;
    padding-top: 70px;
    min-height: $fullMinHeight;
    .title {
      font-family: fzhzgbjt;
      font-size: 58px;
      color: $red;
      font-style: oblique;
      margin: 0 auto 70px auto;
      text-align: center;
    }

    .search-block {
      margin: 50px auto;
      display: flex;
      align-items: center;
      height: 70px;
      width: calc(100% - 210px);
      padding: 10px;
      border-radius: 40px;
      background: $whiteTransparent;

      .search-input {
        flex-grow: 1;
        background: none;
        height: 100%;
        margin-right: 20px;
        font-size: 24px;
        padding-left: 30px;
      }

      .search-btn {
        flex-grow: 0;
        width: 125px;
        height: 50px;
      }
    }
    .block-row{
      width: 100%;
      display: flex;
      margin-top: 20px;
      .block-col.job-fair{
        margin-bottom: $interval;
        width: 100%;
        background: #fff;

          .top-tab-block{
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            height: auto;
            margin-top: 20px;
            .tab-item{
              font-size: 22px;
              border-bottom: 3px solid rgba(0,0,0,0);
              margin:0 20px;
              padding-bottom: 10px;
              cursor: pointer;
              font-weight: bold;
            }
            .tab-item.active{
              border-bottom: 3px solid $red;
              color: $red;
            }
            .more{
              position: absolute;
              right: 20px;
              color: $darkGray;
              font-size: 18px;
              cursor: pointer;
            }
          }
        .body-tab-block{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .tab-item{
            background: #F6F6F6;
            width: calc((100% - 60px) / 2);
            margin: 5px 15px 20px 15px;
            padding: 20px;
            .jobFair-block{
              border-bottom: 1px solid #e4e4e4;
              margin-bottom: 5px;
              height: auto;
              display: flex;
              flex-direction: row;
              .jobTime-item{
                position: absolute;
                .state-img{
                  position: absolute;
                  width: 65px;
                  height: 25px;
                }
                .item-img{
                  width: 120px;
                  height: 80px;
                }
              }
              .job-item{
                display: flex;
                flex-direction: column;
                margin-left: 140px;
                .title-item{
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  .body-title{
                    font-weight: bold;
                    font-size: 18px;
                    margin-bottom: 10px;
                  }
                }
                .time-item{
                  display: flex;
                  flex-direction: row;
                  margin-bottom: 20px;
                  align-items: center;
                  font-size: 15px;
                  .time-title{
                    color: $darkGray;
                    margin-right: 20px;
                  }
                }
              }
            }
            .jobFair-time{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-top: 10px;
              align-items: center;
              .holdTime{
                color: $darkGray;
                font-size: 15px;
              }
              .btn2{
                font-size: 15px;
                width: 100px;
                height: 30px;
                border-radius: 10px;
              }
            }
          }
        }
      }
      .block-col.college{
        background: #fff;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        .top-tab-block{
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          //position: absolute;
          justify-content: space-between;
          margin-top: 10px;
          .tab-title{
            font-size: 22px;
            border-bottom: 3px solid rgba(0,0,0,0);
            margin:0 20px;
            padding-bottom: 10px;
            cursor: pointer;
            font-weight: bold;

          }
          .tab-title.active{
            border-bottom: 3px solid $red;
            color: $red;
          }
          .more{
            color: $darkGray;
            font-size: 18px;
            cursor: pointer;
            position: absolute;
            margin-left: 1150px;
          }
        }
        .college-block{
          display: flex;
          flex-direction: row;
          padding: 20px;
          margin-top: 10px;
          .college-item{
            background: #F6F6F6;
            width: calc((100% - 10px)/4);
            display: flex;
            align-items: center;
            height: auto;
            padding: 20px;
            margin-right: 10px;
            justify-content: space-between;
            .college-img{
              width: 35px;
              height: 40px;
              position: absolute;
            }
            .name-item{
              display: flex;
              flex-direction: column;
              margin-left: 50px;
              .college-name{
                font-size: 18px;
                font-weight: bold;
              }
              .college-EnglishName{
                font-size: 12px;
                color: $darkGray;
                margin-top: 5px;
              }
            }
          }
        }
      }
      .block-col.policy,.block-col.login{
        //height: 442.5px;
      }
      .block-col.policy{
        width: $contentWidth;
        display: flex;
        flex-wrap: wrap;
        .policy-block{
          width: 100%;
          background: $whiteTransparent;
          padding: 20px;
          display: flex;
          flex-direction: column;
          border-radius: $borderRadius;
          margin-bottom: $interval;
            .top-tab-block{
              display: flex;
              flex-direction: row;
              align-items: center;
              position: relative;
              height: auto;
              margin-top: 10px;
              .tab-item{
                font-size: 22px;
                border-bottom: 3px solid rgba(0,0,0,0);
                margin:0 20px;
                padding-bottom: 10px;
                cursor: pointer;
                font-weight: bold;
              }
              .tab-item.active{
                border-bottom: 3px solid $red;
                color: $red;
              }
              .more{
                position: absolute;
                right: 20px;
                color: $darkGray;
                font-size: 18px;
                cursor: pointer;
              }
            }
          .policy-list{
            display: flex;
            flex-direction: column;
            .policy-item{
              display: flex;
              align-items: center;
              margin-top: 20px;
              cursor: pointer;
              .point{
                width: 3px;
                height: 3px;
                background: $red;
                border-radius: 50%;
                margin-right: 10px;
              }
              .policy-title{
                width: calc(100% - 95px - 13px - 10px);
                font-size: 19px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin-right: 10px;
              }
              .date{
                width: 95px;
                color: $darkGray;
              }
            }
          }
        }
        .menu-block{
          width: calc((100% - 15px)/2);
          height: 120px;
          border-radius: $borderRadius;
          //margin-right: $interval;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          div{
            margin-left: 30px;
          }
          .menu-title{
            color: #000;
            font-size: 28px;
            font-family: fzhzgbjt;
            font-style: oblique;
          }
          .sub-title{
            display: flex;
            flex-direction: row;
            align-items: center;
            color: $darkGray;
            font-size: 18px;
            margin-top: 10px;
            .enter{
              width: 20px;
              height: 20px;
              margin-top: 3px;
              margin-left: 15px;
            }
          }
        }
        .menu-block:nth-child(2){
          background:#fff url("~@/assets/images/home/index/job_search.png") no-repeat center right;
          background-position-x:calc(100% - 20px);
          background-size: auto 80%;
          width: 100%;
        }
        .menu-block:nth-child(3){
          background:#fff url("~@/assets/images/home/index/talent.png") no-repeat center right;
          background-size: auto 80%;
          background-position-x:calc(100% - 20px);
          margin-right: 0;
        }
      }
      .block-col.login{
        width: calc((100% - 15px)/3);
        background: #fff;
        border-radius: $borderRadius;
        padding: 30px;
        .login-tab-block{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-bottom: 30px;
          .login-tab-item{
            font-size: 24px;
            border-bottom: 3px solid rgba(0,0,0,0);
            margin-right: 40px;
            padding-bottom: 10px;
            cursor: pointer;
            color: $darkGray;
          }
          .login-tab-item.active{
            border-bottom: 3px solid $red;
            color: #000;
          }
          .login-tab-item:last-child{
            margin-right: 0;
          }
        }
        .login-form-block{
          width: 100%;
          .form-item{
            width: 100%;
            height: 50px;
            background: $lightGray;
            border-radius: 40px;
            margin-bottom: $interval;
            display: flex;
            flex-direction: row;
            align-items: center;
            .form-input{
              width: 100%;
              background:rgba(0,0,0,0);
              height:100%;
              font-size: 18px;
              padding: 0 20px;
            }
            .line{
              width: 3px;
              height: 20px;
              background: $midGray;
              flex-grow: 0;
            }
            .send-btn{
              color: $red;
              width: 120px;
              flex-grow: 0;
              text-align: center;
              cursor: pointer;
            }
          }
          .btn{
            width: 100%;
            height: 50px;
            margin-bottom: $interval;
            font-size: 22px;
          }
        }
      }
      .block-col.banner{
        width: 100%;
        height: 170px;
        border-radius: $borderRadius;
        background: $red;
        display: flex;
        align-items: center;
        justify-content: center;
        .img{
          width: 110px;
          height: 110px;
        }
        .text-block{
          font-family: fzhzgbjt;
          margin: 0 15px;
          div{
            color: #fff;
            font-style: oblique;
            text-align: center;
          }
          .main-title{
            font-size: 24px;
            margin-bottom: $interval;
          }
          .sub-title{
            font-size: 20px;
          }
        }
      }
      .block-col.name{
        width: 100%;
        background: #fff;
        display: flex;
        flex-direction: row;
        height: 50px;
        align-items: center;
        .name{
          font-size: 22px;
          margin:0 20px;
          font-weight: bold;
          cursor: pointer;
        }
        .name.active {
          border-bottom: 3px solid $red;
          color: $red;
        }
      }
      .block-col.position{
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        //justify-content: space-between;
        .position-item {
          width: calc((100% - 30px) / 3);
          margin-right: 15px;
          margin-bottom: 15px;
        }
        .position-item:nth-child(3n) {
          margin-right: 0;
        }

        .position-item.more {
          align-items: center;
          justify-content: center;
          font-size: 15px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 5px;
          height: 230px;
          .more {
            margin-top: 8px;
            font-size: 14px;
            color: $orange;
            cursor: pointer;
          }
        }
      }
      .block-col.personal{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
       //justify-content: space-between;
        .personal-item {
          width: calc((100% - 30px) / 3);
          margin-right: 15px;
          margin-bottom: 15px;
          padding: 20px;
          background-color: #fff;
          height: 150px;
          .information-item{
            border-bottom: 1px solid $lightGray;
            .personal-img{
              width: 50px;
              height: 50px;
              position: absolute;
              margin-bottom: 15px;
              border-radius: 50%;
            }
            .name-item{
              display: flex;
              flex-direction: row;
              margin-left: 70px;
              margin-bottom: 15px;
              .personal-name{
                font-weight: bold;
                font-size: 18px;
              }
              .personal-wage{
                font-weight: bold;
                font-size: 18px;
                color: $orange;
                margin-left: 20px;
              }
            }
            .personal-information{
              margin-left: 70px;
              font-size: 13px;
              color: $darkGray;
              margin-top: 10px;
              margin-bottom: 15px;
              display: flex;
              flex-direction: row;
              .sexText{
                color: $darkGray;
                border-right: 1px solid $darkGray;
                padding-right: 3px;
                margin-right: 3px;
              }
              .education{
                color: $darkGray;
                border-right: 1px solid $darkGray;
                padding-right: 3px;
                margin-right: 3px;
              }
              .workTimeStart{
                color: $darkGray;
              }
            }
          }
          .personal-label-block {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 15px;
            .personal-label-item {
              margin-right: 10px;
              margin-bottom: 10px;
              color: $darkGray;
              background: $lightGray;
              padding: 4px 8px;
              font-size: 13px;
            }
          }
          .address-item{
            display: flex;
            flex-direction: row;
            font-size: 13px;
            .address-title{
              color: $darkGray;
            }
            .personal-address{
              //font-weight: bold;
            }
          }
        }
        .personal-item:nth-child(3n){
          margin-right: 0;
        }
        .personal-item.more {
          align-items: center;
          justify-content: center;
          font-size: 15px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 5px;

          .more {
            margin-top: 8px;
            font-size: 14px;
            color: $orange;
            cursor: pointer;
          }
        }
      }
      .block-col.jump{
        width: calc((100% - 15px)/2);
        height: 170px;
        border-radius: $borderRadius;
        margin-right: $interval;
        background: #ffc68f url("~@/assets/images/home/index/difficult.png") no-repeat center right;
        background-size: auto 80%;
        background-position-x: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 30px;
        .text-block{
          div{
            color: #fff;
            font-style: oblique;
          }
          .main-title{
            font-family: fzhzgbjt;
            font-size: 34px;
          }
          .sub-title{
            margin-top: 20px;
            font-size: 22px;
          }
        }
      }
      .block-col.jump:last-child{
        margin-right: 0;
        background: #bde2ff url("~@/assets/images/home/index/three_a_help.png") no-repeat center right;
        background-size: auto 80%;
        background-position-x: calc(100% - 40px);
      }
      .block-col.job-fair{

      }
    }
  }
}
</style>
